<template>
  <van-button
    class="follow-btn"
    v-bind="$attrs"
    type='info'
    size="small"
    :loading="loading"
    @click.stop="onFollowUser"
  >
    <slot>
      {{ value ? '已关注' : '关注' }}
    </slot>
  </van-button>
</template>

<script>
import { addUserFollow, removeUserFollow } from '@/api/user'
export default {
  name: 'FollowUser',
  components: {},
  props: {
    value: {
      type: Boolean
    },
    userid: {
      type: [Number, String, Object],
      required: true
    }
  },
  data () {
    return {
      loading: false
    }
  },
  computed: {},
  watch: {
  },
  created () { },
  methods: {
    async onFollowUser () {
      if (!this.$store.state.user) { return this.$toast('未登录,请先登录账号') }
      try {
        this.loading = true
        if (this.value) {
          await removeUserFollow(this.$store.state.user.userid, { userid: this.userid })
        } else {
          await addUserFollow(this.$store.state.user.userid, { userid: this.userid })
        }
        this.$emit('input', !this.value)

        this.loading = false
      } catch (error) {
      }
    }
  }
}
</script>

<style scoped>
.van-button--info {
  background-color: #f85959;
  border: none;
}
</style>
